<!--
 * @Author: Meow
 * @Date: 2019-09-29 10:48:31
 * @LastEditors: Meow
 * @LastEditTime: 2019-10-22 14:07:08
 * @Description: 业务流程管理
 -->
<template>
  <div id="ProcessManagement">
    <div class="container">
      <div class="view">
        <div class="top">
          <el-form :inline="true" label-width="120px">
            <el-form-item label="业务名称：">
              <el-input placeholder="业务名称" v-model="tableConfig.busiProceName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addProcess">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-scrollbar :native="false" tag="section" class="el-scroll">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
              <el-table-column prop="busiProceName" label="业务名称" align="center"></el-table-column>
              <el-table-column prop="parentName" label="父流程" align="center"></el-table-column>
              <el-table-column prop="parentNodeName" label="父节点" align="center"></el-table-column>
              <el-table-column prop="summary" label="概述" align="center"></el-table-column>
              <el-table-column prop="labelName" label="标签" align="center">
                <!-- <template slot-scope="scope">{{scope.row.labelName }}</template> -->
              </el-table-column>
              <el-table-column prop="version" label="当前版本" align="center"></el-table-column>
              <el-table-column label="操作" align="center" min-width="200">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="toVersionManagement">版本管理</el-button>
                  <el-button size="mini" type="primary" @click="toSearchDetail(scope.row)">查看详情</el-button>
                  <el-button size="mini" type="primary" @click="toUpdatePage(scope.row)">修改</el-button>
                  <el-button size="mini" type="primary" @click="stopUse">停用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
        <div class="bottom">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            background
            :page-size="tableConfig.pageSize"
            :total="tableConfig.total"
            :page-count="10"
            :page-sizes="[5, 10, 20, 40]"
            :current-page="tableConfig.pageNum"
            @current-change="changePage"
            @size-change="sizeChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import processManagementApi from "@/httpUtils/ExternalManagement/processManagement";
export default {
  name: "ProcessManagementView",
  data() {
    return {
      // 分页配置
      tableConfig: {
        pageNum: 1, // 页码
        pageSize: 5, // 条数
        busiProceName: "", // 流程名搜索
        total: 0 // 总数
      },
      // 表数据
      tableData: []
    };
  },
  filters: {
    FormatNull(value) {
      if (value == null || value == undefined || value == "") {
        return "";
      }
    }
  },
  created() {
    this.GetTableData(this.tableConfig);
  },
  methods: {
    // 搜索
    search() {
      this.GetTableData(this.tableConfig);
    },
    // 条数更改
    sizeChange(size) {
      this.tableConfig.pageSize = size;
      this.GetTableData(this.tableConfig);
    },
    // 页面变更
    changePage(page) {
      this.tableConfig.pageNum = page;
      this.GetTableData(this.tableConfig);
    },
    // 获取表格数据
    GetTableData(tableConfig) {
      this.loading = true;
      processManagementApi.tableData(tableConfig).then(res => {
        console.log(" 流程表格数据--------------", res);
        this.tableData = res.data.data.list;
        this.tableConfig.total = res.data.data.total;
        this.loading = false;
      });
    },
    // 点击跳转 操作页
    addProcess() {
      this.$router.push({
        path: `/${_routerPath.routerName}/ProcessManagementHost/operationPage`
      });
    },
    // 版本管理页
    toVersionManagement(data) {
      this.$message.warning("功能正在优化中...");
      return;
      this.$router.push({
        name: "versionManagement",
        query: { busiProceId: data.busiProceId }
      });
    },
    stopUse() {
      this.$message.warning("功能正在优化中...");
      return;
    },
    // 查看详情
    toSearchDetail(data) {
      let version = this.versionId;
      this.$router.push({
        path: `/${_routerPath.routerName}/ProcessManagementHost/searchDetail`,
        query: { busiProceId: data.busiProceId, versionId: data.versionId }
      });
    },
    // 跳转修改页
    toUpdatePage(data) {
      let version = this.versionId;
      this.$router.push({
        path: `/${_routerPath.routerName}/ProcessManagementHost/updatePage`,
        query: { busiProceId: data.busiProceId, versionId: data.versionId }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./ProcessManagement.less");
</style>